<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="main">
        <div class="contain">
        <p class="xiangqing">
          <i class="el-icon-position"></i>
          地产详情
          </p>
        <div class="box1">
            <h3>{{title}}</h3>
            <div class="imgbox">
                <div class="imgOne">
                    <img v-imgErr="require('@/assets/cat.webp')" :src="imgOne" alt="">
                </div>
                <div class="imgTow">
                    <div class="imgTow-one">
                            <li v-for="item in 4" :key="item.index"
                            ><img v-imgErr="require('@/assets/aa.png')" :src="imgTwo" alt="">
                            </li>
                    </div>
                    <div class="imgTow-tow">
                        <img v-imgErr="require('@/assets/aa.png')" :src="imgThree" alt="">
                    </div>
                </div>
            </div>
            <div class="xian"></div>
            <p class="text-box" v-html="content">
            </p>
        </div>
    </div>
  </div>
</template>

<script>
import {  getXiangQing,getHello } from '@/api/xiangqing'
export default {
  data () {
    return {
      imgOne: '',
      imgTwo: '',
      imgThree: '',
      title: '',
      content: ''
    }
  },
  async created () {
    const id = this.$route.params.id
    const res = await getHello()
    console.log(res);
    const result = await getXiangQing(id) // 需要传入地产列表对应的id
    //    console.log(result);

    this.imgOne = result.data.image
    this.imgTwo = result.data.agent.image
    this.imgThree = result.data.category.image
    this.title = result.data.address
    this.content = result.data.content
  }
}
</script>

    <style scoped>
        .contain{
            margin: 0 auto;
            width: 700px;
            margin-bottom: 10px;
        }
        .imgbox{
            display: flex;
        }
        .imgOne{
            width: 400px;
            height: 400px;
            background-color: skyblue;
        }
        .imgTow{
            display: flex;
            flex-direction: column;
            margin-left: 50px;
            width: 200px;
            height: 400px;
        }
        .imgTow .imgTow-one{
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            /* background-color: purple; */
        }
        .imgTow .imgTow-one li{
            /* flex: 1; */
            width: 80px;
            margin-top: 10px;
            list-style: none;
        }
        .imgTow .imgTow-tow{
            flex: 1;
            margin-top: 10px;
            background-color: aqua;
        }
        .xian {
            height: 1px;
            width: 100%;
            margin-top: 10px;
            background-color: rgb(192, 187, 187);
        }
        .box1{
             border: 1px solid rgb(192, 187, 187);
        }
        h3{
            margin-top: 8px;
            margin-bottom: 0;
        }
        .text-box{
            /* width: 200px; */
            line-height: 30px;
        }
        .xiangqing{
          color: orange;
          margin-bottom: 0;
          margin-top: 8px;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>
